<template>
  <div class="">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="月份范围">
          <el-date-picker
            v-model="monthrange" end-placeholder="结束月份"
            format="yyyy-MM"
            range-separator="至"
            start-placeholder="开始月份"
            type="monthrange" value-format="yyyy-MM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <regional-chart :chart-option="chartInfo" title="区域能源消费统计"></regional-chart>
    <regional-table class="margin-top" :lists="lists" :loading="loading"></regional-table>
  </div>
</template>

<script>
import RegionalChart from './chart'
import RegionalTable from './table'
import { areaList } from '@/api/energyCompanies'
import { uuid } from '@/utils'

export default {
  name: 'regional-data-presentation',
  components: {
    RegionalChart,
    RegionalTable,
  },
  data () {
    const end = this.$dayjs().format('YYYY-MM')
    const start = this.$dayjs().subtract(1, 'year').format('YYYY-MM')
    return {
      monthrange: [start, end],
      loading: false,
      lists: [],
      districts: [],
    }
  },
  computed: {
    energyVariety () {
      return this.$store.state.energyVariety
    },
    otherEnergyName () {
      return this.$store.getters.otherEnergyName
    },
    chartInfo () {
      const districts = this.districts
      const energyStructure = ['能源消费总量', ...this.energyVariety.map(v => v.name)]
      const lists = this.lists
      const otherEnergyName = this.otherEnergyName
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        legend: {
          data: [...energyStructure],
          selected: {
            [otherEnergyName]: false,
          }
        },
        grid: {
          left: '4%',
          right: '4%',
        },
        toolbox: {
          show: false,
          orient: 'horizontal',
          left: 'right',
          top: 'top',
          feature: {
            mark: { show: true },
            dataView: { show: true },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: districts
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '能源消费总量',
            type: 'line',
            data: lists.map(v => v.total)
          },
          ...this.energyVariety.map((v, i) => ({
            name: v.name,
            type: 'bar',
            label: {
              show: true,
              position: 'insideBottom',
              align: 'left',
              verticalAlign: 'middle',
              distance: 10,
              rotate: 90,
              fontSize: 12,
              formatter: '{c}  {name|{a}}',
              rich: {
                name: {}
              }
            },
            emphasis: {
              focus: 'series',
            },
            data: lists.map(vv => vv[v.value])
          }))
        ],
      }
    },
  },
  mounted () {
    this.$store.dispatch('GET_ENERGY_VARIETY')
    this.getLists()
  },
  methods: {
    onSearch () {
      this.getLists()
    },
    getLists () {
      this.loading = true
      const [startTime, endTime] = this.monthrange
      return areaList(startTime, endTime).then(res => {
        if (res.code === 200) {
          res.data.forEach(v => {
            v.id = uuid()
            v.area = v.districtBelongName
            v.total = v.totalConsumption
            v.electric = v.electricity
            v.gas = v.naturalGas
          })
          this.districts = res.data.map(v => v.districtBelongName)
          this.lists = res.data
        }
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>
